<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<style>
    #message {
        width: 50%;
        height: 500px;
        border: 1px solid black;
        margin: auto;
        -webkit-overflow-scrolling: touch; /* 可以让页面在Native端滚动时模拟原生的弹性滚动效果  */
    }

    #inputVal {
        width: 50%;
        margin: auto;
        display: flex;
    }

    .chat-list {
        height: 500px;
        overflow: auto;
        -ms-overflow-style: none;
        padding-right: 10px;
        padding-left: 10px;
    }

    .chat-list::-webkit-scrollbar {
        width: 0 !important
    }

    #message .buyer {
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-left: 10px;
    }

    /*#message .buyer::before {*/
    /*    !*content: '用户';*!*/
    /*    !*content: attr(data-before);*!*/
    /*    font-weight: bold;*/
    /*    position: absolute;*/
    /*    top: 50%;*/
    /*    left: -40px;*/
    /*    margin-top: -15px;*/
    /*}*/

    #message .buyer-conent::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        left: -10px;
        margin-top: -10px;
        border-top: 5px solid transparent;
        border-right: 10px solid #3a8ee6;
        border-bottom: 5px solid transparent;
    }

    #message .me {
        display: flex;
        justify-content: flex-end;
        position: relative;
        margin-right: 35px;
    }

    #message .time{
        text-align: center;
        font-size: 12px;
    }


    #message .me::after {
        content: '我';
        position: absolute;
        font-weight: bold;
        top: 50%;
        right: -25px;
        margin-top: -15px;
    }

    #message .sys {
        text-align: center;
        color: #00b7ee;
    }

    #message .me-content::after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        right: -10px;
        margin-top: -10px;
        border-top: 5px solid transparent;
        border-left: 10px solid white;
        border-bottom: 5px solid transparent;
    }

    #message .me-content {
        max-width: 90%;
        padding: 10px;
        display: inline-block;
        background-color: white;
        border-radius: 5px;
        text-align: left;
        margin-bottom: 10px;
    }

    #message .buyer-conent {
        max-width: 90%;
        padding: 10px;
        display: inline-block;
        background-color: #3a8ee6;
        color: white;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    /* 适配手机 */
    @media (max-width: 800px){
        #message{
           width: 100%;
        }
        #inputVal{
            width: 100%;
        }
        .layui-tab-title li{
            font-size: 10px;
        }
    }
    /* 适配电脑 */
    @media (min-width: 800px) {
        #message{
            width: 50%;
        }
        #inputVal{
            width: 50%;
        }
    }
</style>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="chat" lay-allowClose="true">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="default">聊天列表</li>
    </ul>
    <div class="layui-tab-content">
        <!--        <div class="layui-tab-item layui-show">-->
        <!--            <div id="message">-->
        <!--                <div class="chat-list">-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div id="inputVal">-->
        <!--                <input type="text" name="text" class="layui-input">-->
        <!--                <button onclick="send()" class="layui-btn layui-btn-primary layui-disabled" disabled="disabled">发送-->
        <!--                </button>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-tab-item layui-show" style="margin: auto">
            <table id="t" lay-filter="t" style="width: 100%">
            </table>
        </div>
    </div>
    <button id="pic" style="display: none"></button>
</div>
<script type="text/html" id="caozuo">
    <input type="button" value="打开" class="layui-btn layui-btn-sm" lay-event="chatfor"/>
</script>
<script src="/admin/js/parsejson.js"></script>
<script>
    var $ = layui.jquery;
    var form = layui.form;
    var table = layui.table;
    var websocket = null;
    var kefuid = sessionStorage.getItem("kefu_name");
    var areaId = sessionStorage.getItem("areaId");
    var userid = "";
    var element = layui.element;
    var timer = null;   //定时器心跳包
    var upload = layui.upload;
    var now_uname ="";//当前点击的用户

    $(function () {
        let width = $(window).width();
        if(width<1000){
            console.log("手机了");
            $("#message").width(width+"px");
            $("#inputVal").width(width+"px");
        }
    });

    function lianjie() {
        let host = getRootPath();
        websocket = new WebSocket("ws:" + host + "/websocket/" + kefuid + "/user2/" + kefuid + "/"+areaId);
        // console.log("lianjie:websocket="+websocket.toString());
        jianliWebSocket();
    }

    // 添加新的选项卡
    function newTab(uname, abc) {        //abc用于判断是否为用户连接而打开的选项卡，其次为客服自己打开的选项卡，0为前者，1为后者
        var isExit = 0; //0：不存在 1：已存在
        if (uname.startsWith("+")) {
            uname = uname.substring(1);// 去掉+号
        }
        $(".layui-tab-title li").each(function () {
            if ($(this).attr("lay-id") == uname) {
                isExit = 1;
                if (abc == 0) {
                    // systemMsg("对方重新连接了", uname);
                }
            }
        });
        if (isExit == 0) {
            element.tabAdd('chat', {
                title: uname
                , content: ` <div id="message" class="${uname}">
                                <div class="chat-list">
                                </div>
                            </div>
                            <div id="inputVal">
                                <input type="text" name="text" class="layui-input" id="sendto" onkeyup="autoSend(event)" autocomplete="true">
                                <button  onclick="pic('${uname}')" class="layui-btn layui-btn-primary"><img style="width: 30px" src="/home/img/picture.png"></button>
                                <button onclick="send()" style="margin-left: 0px" class="layui-btn layui-btn-primary">发送</button>
                            </div>` //支持传入html
                , id: uname
            });
            tableIns.reload({
                where: {}
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return 0;
        } else {
            return 1;
        }
    }

    //建立websocket的相关功能
    function jianliWebSocket() {
        websocket.onopen = function () {
            heartCheck.reset().start();      //心跳检测重置
            systemMsg("服务器已经连接成功");
        };
        websocket.onclose = function (e) {
            // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
            systemMsg("服务器连接失败");
            // lianjie();
            // systemMsg("已重新连接");
            // layer.msg("已重新连接");
        };
        websocket.onmessage = function (event) {
            heartCheck.reset().start();//拿到任何消息都说明当前连接是正常的
            if(event.data!="ping"){
                let obj = JSON.parse(event.data);
                // console.log("收到消息："+obj);
                if (obj.type == 1) {
                    newTab(obj.message, 0);
                } else if (obj.type == 5) {//用户下线了，添加系统消息
                    if (obj.sendname.toString().startsWith("+")) {
                        obj.sendname = obj.sendname.toString().substring(1);// 去掉+号
                    }
                    var s = '<div class="sys"><div class="sys-content">对方下线了</div></div>';
                    $("." + obj.sendname).find('.chat-list').append(s);
                    let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
                    $(".chat-list").scrollTop(h);
                } else if (obj.type == 4) {
                    // layer.msg(obj.message, {icon: 2, time: 2000});
                    layer.confirm(obj.message+",请重新打开此页面.",["确定","取消"],function(){
                        location.reload();
                    });
                } else if (obj.type ==6){
                    //消息发送失败了
                    layer.msg("对方离线中");
                    systemMsg("对方处于离线状态",obj.name);
            }else
                    addMessageFromServer(event.data, obj.sendname,getCurrentDate());
            }

        };
        websocket.onerror = function () {
            systemMsg("服务器连接失败");
        };
    }

    // window.setInterval(socketRest, 1000);
    // timer = window.setInterval(socketRest, 1000);
    // //定时任务，由于使用nginx反向代理，60秒无数据传输会断开
    // setInterval(function() {
    //     if (websocket.readyState == 1) {
    //         websocket.send("心跳包检测");
    //     } else {
    //         //IM连接已断开
    //     }
    // }, 50 * 1000);

        //一些事件触发
        // 监听tab切换 操作：文档 - 内置模块 - 常用元素操作 element - 监听tab切换
        element.on('tab(chat)', function (data) {
            // console.log(this);        // 当前Tab标题所在的原始DOM元素
            // console.log(data.index);  // 得到当前Tab的所在下标
            // console.log(data.elem);   // 得到当前的Tab大容器
            let uname = $(this).attr("lay-id");
            userid = uname;
            var jilu = $("." + uname).find('.chat-list').find("div");
            if (jilu.length < 1) {
                // 新加选项卡之后加载历史记录,第一次点击时记载历史记录
                addHistoryChat(kefuid, uname);
            } else {
                addnewChat(kefuid, uname);
            }
        })

        if ('WebSocket' in window) {
            lianjie();
        } else {
            layer.msg("浏览器不支持");
        }

    //心跳检测
    var heartCheck = {
        timeout: 50000,        //50秒发一次心跳
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function () {
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function () {
            var self = this;
            this.timeoutObj = setTimeout(function () {
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                //onmessage拿到返回的心跳就说明连接正常
                websocket.send("ping");
                console.log("ping!");
                self.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置，说明后端主动断开了
                    console.log("超过一定时间");
                    layer.msg("服务器断开连接",{icon:2,time:2000},function () {
                        location.reload();
                    });
                    websocket.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                }, self.timeout)
            }, this.timeout)
        }
    }



        var tableIns = table.render({
            url: '/chat/getChatForUser?kefuname=' + kefuid,
            id: 't',
            elem: '#t',
            parseData: function (res) {
                res = json.parse(res);
                for (var i in res.data) {
                    res.data[i].areacenter = {};
                }
                return res
            },
            cols: [[
                {title: "序号", width: "80", align: "center", type: 'numbers'},
                {title: '用户名称', field: 'uuname', width: '300', align: 'center'},
                {title: '手机号（游客手机号等于用户名）', field: 'userName', width: '300', align: 'center'},
                {
                    title: '未读消息', field: 'weidu', width: '120', align: 'center', templet: function (d) {
                        if (d.weidu > 0) {
                            return "<sapn style='color: red'>" + d.weidu + "</sapn>";
                        } else {
                            return "<sapn style='color: black'>" + d.weidu + "</sapn>";
                        }
                    }
                },
                {title: '最近聊天时间', field: 'latedate', width: '200', align: 'center',},
                , {title: '操作', toolbar: '#caozuo', width: 74, align: 'center'}
            ]],
            page: true,
            page: {
                curr: layui.data("chat_page").index,
                layout: ['prev', 'page', 'next', 'skip', 'count', 'limit', 'refresh']
            },
            loading: false,
            limit: 10,
            done: (res, curr, count) => {
                layui.data("chat_page", {
                    key: 'index',
                    value: curr
                });
            }
        });

        function panchat() {
            $(".layui-icon-refresh").trigger("click");
        }

        window.setInterval(panchat, 5000);

        table.on('tool(t)', function (obj) {
            var getdata = obj.data //获得当前行数据
            var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
            var username = getdata.userName;
            if (username.startsWith("+")) {
                username = username.substring(1);
            }
            switch (layEvent) {
                case 'chatfor':
                    var isExit = newTab(getdata.userName, 1);
                    if (getdata.userName.toString().startsWith("+")) {
                        getdata.userName = getdata.userName.toString().substring(1);
                    }
                    if (isExit == 0) {
                        $(".layui-tab-title li").each(function () {
                            if ($(this).attr("class") == "layui-this") {
                                $(this).attr("class", "");
                            } else if ($(this).attr("lay-id") == getdata.userName) {
                                $(this).addClass("layui-this");
                            }
                        });
                        $(".layui-tab-content .layui-show").removeClass("layui-show");
                        $(".layui-tab-content>div:last").addClass("layui-show");
                        addHistoryChat(kefuid, username);
                    } else {
                        $(".layui-tab-title .layui-this").removeClass("layui-this");
                        var ind = 0;
                        var index = 0;
                        $(".layui-tab-title li").each(function () {
                            if ($(this).attr("lay-id") == getdata.userName) {
                                $(this).addClass("layui-this");
                                index = ind;
                            }
                            ind++;
                        });
                        $(".layui-tab-content .layui-show").removeClass("layui-show");
                        $(".layui-tab-content>div").eq(index).addClass("layui-show");
                        var jilu = $("." + username).find('.chat-list').find("div");
                        if (jilu.length < 1) {
                            addHistoryChat(kefuid, username);
                        }
                        addnewChat(kefuid, username);
                    }
                    break;
            }
        });

        function addHistoryChat(kefuname, uname) {
            if (!uname.startsWith("+")) {
                if (!uname.startsWith("user")){
                    uname = "+" + uname
                }
            }
            layer.load(2);
            $.ajax({
                url: '/chat/getHistoryChat',
                async: false,
                data: {kefuname: kefuname, username: uname},
                success: function (data) {
                    if (uname.startsWith("+")) {
                        uname = uname.substring(1);
                    }
                    if (data.code == 200) {
                        var chatList = data.data;

                        for (let i = 0; i < chatList.length; i++) {
                            if (chatList[i].mtype == 1) {
                                var str = "";
                                if (chatList[i].ptype==1){
                                    str = chatList[i].usermsg;
                                }else{
                                    str = "<img src='/upload/chat/"+chatList[i].picture+"' style='width: 90%'>"
                                }
                                var s = '<div class="time">'+chatList[i].time+'</div><div class="buyer"><div class="buyer-conent">' + str + '</div></div>';
                                $("." + uname).find('.chat-list').append(s);
                                $("." + uname).find('.chat-list').find(".buyer").last().before(chatList[i].uname);
                                let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
                                $("." + uname).find('.chat-list').scrollTop(h);
                            } else if (chatList[i].mtype == 2) {
                                var str = "";
                                if (chatList[i].ptype==1){
                                    str = chatList[i].kefumsg;
                                }else{
                                    str = "<img src='/upload/chat/"+chatList[i].picture+"' style='width: 90%'>"
                                }
                                var s = '<div class="time">'+chatList[i].time+'</div><div class="me"><div class="me-content">' + str + '</div></div>';
                                $("." + uname).find('.chat-list').append(s);
                                let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
                                $("." + uname).find('.chat-list').scrollTop(h);
                            }
                        }
                        var s = '<div class="sys"><div class="sys-content">以上是历史信息</div></div>';
                        $("." + uname).find('.chat-list').append(s);
                        let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
                        $("." + uname).find('.chat-list').scrollTop(h);
                    } else {
                        var s = '<div class="sys"><div class="sys-content">还没有历史聊天记录</div></div>';
                        $("." + uname).find('.chat-list').append(s);
                        let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
                        $("." + uname).find('.chat-list').scrollTop(h);
                    }
                }
            })
            layer.closeAll();
        }

        function addnewChat(kefuname, uname) {
            if (!uname.toString().startsWith("+")){
                if (!uname.toString().startsWith("user") ){
                    uname = "+"+uname;
                }
            }
            layer.load(2);
            $.ajax({
                url: '/chat/addnewChat',
                async: true,
                data: {kefuname: kefuname, username: uname},
                success: function (data) {
                    if (uname.startsWith("+")) {
                        uname = uname.substring(1);
                    }
                    if (data.code == 200) {
                        var chatList = data.data;
                        for (let i = 0; i < chatList.length; i++) {
                            if (chatList[i].mtype == 1) {
                                var s = '<div class="time">'+chatList[i].time+'</div><div class="buyer"><div class="buyer-conent">' + chatList[i].usermsg + '</div></div>';
                                $("." + uname).find('.chat-list').append(s);
                                $("." + uname).find('.chat-list').find(".buyer").last().before(chatList[i].uname);
                                let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
                                $("." + uname).find('.chat-list').scrollTop(h);
                            } else if (chatList[i].mtype == 2) {
                                var s = '<div class="time">'+chatList[i].time+'</div><div class="me"><div class="me-content">' + chatList[i].kefumsg + '</div></div>';
                                $("." + uname).find('.chat-list').append(s);
                                let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
                                $("." + uname).find('.chat-list').scrollTop(h);
                            }
                        }
                        // $("." + uname).find('.chat-list').append(s);
                        // let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
                        // $("." + uname).find('.chat-list').scrollTop(h);
                    }
                }
            })
            layer.closeAll();
        }


    // 添加系统消息
    function systemMsg(msg, uname) {
        if (uname != undefined) {
            if (uname.startsWith("+")) {
                uname = uname.substring(1);
            }
        }
        var s = '<div class="sys"><div class="sys-content">' + msg + '</div></div>';
        $("." + uname).find('.chat-list').append(s);
        let h = parseInt($("." + uname).find('.chat-list').css("height")) + $("." + uname).find('.chat-list').scrollTop();
        $("." + uname).find('.chat-list').scrollTop(h);
    }

    // 添加自己对话消息
    function addMessage(message, userid,timeStr) {
        if (userid.startsWith("+")) {
            userid = userid.substring(1);
        }
        var s = '<div class="time">'+timeStr+'</div><div class="me"><div class="me-content">' + message + '</div></div>';
        $('.layui-show .chat-list').append(s);
        let h = parseInt($("." + userid).find('.chat-list').css("height")) + $("." + userid).find('.chat-list').scrollTop();
        $("." + userid).find('.chat-list').scrollTop(h);
    }

    // 添加他人对话消息
    function addMessageFromServer(message, userid,timeStr) {
        // console.log("收到websocket的消息");
        if (userid.startsWith("+")) {
            userid = userid.substring(1);
        }
        var nowid = $(".layui-tab-title .layui-this").attr("lay-id");//当前选项卡的用户
        if (nowid == userid) {
            let obj = JSON.parse(message);
            var str = "";
            var s = "";
            console.log(obj);
            if (obj.ptype==1){//文字信息
                str = obj.message;
            }else{
                str = "<img src='/upload/chat/"+obj.message+"' style='width: 90%'>";
            }
            s = '<div class="time">'+timeStr+'</div><div class="buyer"><div class="buyer-conent">' + str + '</div></div>';

            $("." + userid).find('.chat-list').append(s);
            $("." + userid).find('.chat-list').find(".buyer").last().before(obj.uname);
            let h = parseInt($(".chat-list").css("height")) + $(".chat-list").scrollTop();
            $(".chat-list").scrollTop(h);
            if (!userid.startsWith("+")){
                if (!userid.startsWith("user")){
                    userid = "+" + userid;
                }
            }
            $.ajax({
                url: '/chat/editWeidu',
                async: false,
                data: {kefuname: kefuid, username: userid},
                success: function (res) {
                    if (res.code == 500) {
                        layer.msg(res.msg, {icon: 2, time: 2000})
                    }
                }
            })
        }
    }

    function send() {
        var msg = $(".layui-show input").val();
        // type:1 用户给客服
        // type:2 客服给用户
        if (msg.length < 1) {
            layer.msg("回复的内容不能为空");
            return;
        }
        if(kefuid==null || kefuid==""){
            layer.confirm("数据异常，请重新登录！",["确定"],function(){
                $.ajax({
                    url:'/admin/quitLogin',
                    datatype:'json',
                    type:'get',
                    success:function (result) {
                        if (result.code==200){
                            layer.msg("退出登录");
                            window.location = '../index.html';
                        }else{
                            layer.msg(result.msg,{icon:2,time:1000});
                        }
                    }
                })
            });
        }
        let userid = $(".layui-show #message").attr('class');
        console.log(userid);
        if (!userid.startsWith("+")) {
            if (!userid.startsWith("user")){
                userid = "+" + userid;
            }
        }
        console.log(userid);
        let obj = {"message": msg, "type": 2, "kname": kefuid,"ptype":1};
        var data = {"type": 2, "name": kefuid, "kefu": userid, "msg": obj,"ptype":1};
        // console.log("发消息的ws："+websocket.toString());
        websocket.send(JSON.stringify(data));
        addMessage(msg, userid,getCurrentDate());
        $(".layui-show input").val('');
    }

    function pic(uname) {
        now_uname=uname;
        $("#pic").trigger("click");
    }

    //上传图片
    var uploadInst = upload.render({
        elem: '#pic'
        , url: '/admin/upload/sendimg' //改成您自己的上传接口
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                // $('#logo').attr('src', result); //图片链接（base64）
            });
        }
        , done: function (res) {
            //判断上传是否成功
            if (res.code == 0) {
                let username = now_uname;
                if (!username.startsWith("+")) {
                    if (!username.startsWith("user")){
                        username = "+" + username;
                    }
                }
                let obj = {"message": res.data, "type": 2, "kname": kefuid,"ptype":2};
                var data = {"type": 2, "name": kefuid, "kefu": username, "msg": obj,"ptype":2};
                // console.log("发消息的ws："+websocket.toString());
                websocket.send(JSON.stringify(data));
                addMessage("<img src='/upload/chat/"+res.data+"' style='width: 90%'>", now_uname,getCurrentDate());
            }else{
                return layer.msg('图片上传失败！');
            }
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });

    function autoSend(event) {
        if (event.which == 13)
            send();
    }

    function getRootPath() {
        //http://localhost:8083/uimcardprj/share/meun.jsp
        var curWwwPath = window.document.location.href;
        //uimcardprj/share/meun.jsp
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        //http://localhost:8083
        var localhostPaht = curWwwPath.substring(6, pos);
        // uimcardprj
        var projectName = pathName
            .substring(0, pathName.substr(1).indexOf('/') + 1);
        if (projectName == "/pc" || projectName == "/admin" || projectName == "/weixin" || projectName == "/wap")
            projectName = "";

        return (localhostPaht);
    }

    //获取当前时间
    function getCurrentDate(){
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        var str=y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+'  '+(h<10?('0'+h):h)+':'+(min<10?('0'+min):min)+':'+(s<10?('0'+s):s);
        return str;
    }
</script>

</body>
</html>